<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CrawlerTool',
  setup() {
    const url = ref('')
    const method = ref('frontend')
    const loading = ref(false)
    const results = ref<string[]>([])
    const error = ref('')
    const crawlFrontend = async () => {
      if (!url.value) {
        // eslint-disable-next-line no-alert
        alert('请输入目标网址')
        return
      }

      loading.value = true
      results.value = []

      try {
        // 发起 HTTP 请求获取目标网页内容
        const response = await fetch(url.value)
        if (!response.ok) {
          throw new Error(`HTTP 错误: ${response.status}`)
        }

        const html = await response.text()
        const parser = new DOMParser()
        const doc = parser.parseFromString(html, 'text/html')

        // 提取所有链接
        const links = Array.from(doc.querySelectorAll('a')).map(a => a.href)

        // 过滤出包含 repodata 的链接
        const repodataLinks = links.filter(link =>
          link && link.includes('repodata'),
        )

        // 更新结果
        results.value = repodataLinks
        loading.value = false
      }
      catch (err) {
        console.error('爬取失败:', err)
        error.value = `爬取失败: ${(err as Error).message}`
        loading.value = false
      }
    }
    const crawl = async () => {
      if (method.value === 'frontend') {
        await crawlFrontend()
      }
      else if (method.value === 'backend') {
        // TODO: 实现后端爬取逻辑
      }
      else if (method.value === 'agent') {
        // TODO: 实现agent爬取逻辑
      }
    }

    return {
      url,
      loading,
      results,
      method,
      error,
      crawl,
    }
  },
})
</script>

<template>
  <div class="crawler-tool">
    <h1>网页爬虫工具</h1>
    <div class="input-group">
      <input
        v-model="url"
        type="text"
        placeholder="请输入目标网址"
        class="url-input"
      >
      <select v-model="method" class="method-select">
        <option value="frontend">
          前端爬取
        </option>
        <option value="backend">
          后端爬取
        </option>
        <option value="agent">
          Agent爬取
        </option>
      </select>
      <button class="crawl-button" @click="crawl">
        开始爬取
      </button>
    </div>
    <div v-if="loading" class="loading">
      正在爬取数据，请稍候...
    </div>
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    <div v-if="results.length > 0" class="results">
      <h2>找到的 repodata 目录：</h2>
      <ul>
        <li v-for="(result, index) in results" :key="index">
          {{ result }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.crawler-tool {
  padding: 20px;
}

.input-group {
  display: flex;
  margin-bottom: 20px;
}

.url-input {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.method-select {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.crawl-button {
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
}

.crawl-button:hover {
  background-color: #0056b3;
}

.loading {
  margin: 20px 0;
  color: #666;
}

.error-message {
  padding: 10px;
  margin-top: 20px;
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

.results {
  margin-top: 20px;
}

.results ul {
  padding: 0;
  list-style-type: none;
}

.results li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
</style>
